<style lang="stylus" scoped>
.custom-link {
  padding: 20px 0;
  
}

.input-item {
  margin-bottom: 20px;

  .label {
    height: 14px;
    margin-bottom: 6px;
    line-height: 14px;
    font-size: 12px;
    color: #6f6f85;
  }
}

.undercoat {
  display: inline-block;
  width: 50px;
  height: 26px;
  border: 4px solid #1a1d23;
  border-radius: 4px;
  text-align: center;

  &:before {
    content: '底色';
    display: block;
    width: 24px;
    height: 100%;
    writing-mode: vertical-lr;
    background: #1a1d23;
    line-height: 20px;
    font-size: 12px;
    color: #565d6c;
  }
}

.size-selector {
  margin-left: 10px;
}

.footer {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  text-align: right;
}

.optionOpen {
  height: 300px;
  overflow: hidden;
}

.option {
  padding: 2px;
  color: #fff;
}

.optionInput {
  height: 30px;
  width: 100%;
}
</style>

<template>
  <v-button @click="confirm">保存</v-button>
  <div class="custom-link" style="">
    <MdEditor theme="dark" v-model="content" :toolbars="toolbars" pageFullScreen></MdEditor>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';
import { Note } from '@database/entity/note';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
export default {
  emits: ['confirm'],
  components: { MdEditor },
  props: {
    noteData: {
      type: Note,
      default() {
        return null;
      },
    },
  },
  setup(props, context) {
    const toolbars = ['bold','underline','italic','strikeThrough','title','sub','sup','quote','unorderedList','orderedList','codeRow','code','link','table','revoke','next','save','pageFullscreen','fullscreen','preview'];
    const paramsSeprator = '&&|&&';
    const title = ref(props.noteData.title);
    const content = ref(props.noteData.content);
    return {
      title,
      content,
      toolbars,
      confirm() {
        const numberMatch = content.value.match(/# (.+)/);
        title.value = numberMatch? numberMatch[1] : content.value.substring(0, 5);
        context.emit('confirm', {
          undercoat: title,
          value: `note:${title.value}${paramsSeprator}${content.value}`,
        });
      },
    };
  },
};
</script>